<template>
  <div v-bind:class="{blue: search}">
    <a href="javascript:;" class="navbar-toggle" @click="shown=!shown">
      <i-icon type="navicon-round" v-show="!shown"></i-icon>
      <i-icon type="close" v-show="shown"></i-icon>
    </a>
    <ul class="navbar-nav pull-right navbar-profile">
      <li class="toolbar-item search-nav-item" v-if="search">
        <quick-search></quick-search>
      </li>
      <li class="toolbar-item">
        <router-link class="nav-link" :to="{name: 'notifications'}">
          <i-icon type="ios-bell"></i-icon>
          <span>消息</span>
        </router-link>
      </li>
      <li class="toolbar-item">
        <router-link class="nav-link" :to="{name: 'manage'}">
          <i-icon type="android-person"></i-icon>
          <span>{{account.name}}</span>
        </router-link>
      </li>
      <li class="toolbar-item" v-if="account.role !== -1">
        <router-link class="nav-link" :to="{name: 'logout'}">
          <i-icon type="android-exit"></i-icon>
          <span>退出</span>
        </router-link>
      </li>
    </ul>
    <div class="navbar-list-wrap" v-show="shown" @click="shown=false">
      <div class="container">
        <ul class="navbar-nav">
          <li class="toolbar-item">
            <router-link class="nav-link" :to="{name: 'notifications'}">
              <i-icon type="ios-bell"></i-icon>
              <span>消息</span>
            </router-link>
          </li>
          <li class="toolbar-item">
            <router-link class="nav-link" :to="{name: 'manage'}" @click="shown=false">
              <i-icon type="android-person"></i-icon>
              <span>{{account.name}}</span>
            </router-link>
          </li>
          <li class="toolbar-item" v-if="account.role !== -1">
            <router-link class="nav-link" :to="{name: 'logout'}" @click="shown=false">
              <i-icon type="android-exit"></i-icon>
              <span>退出</span>
            </router-link>
          </li>
          <li class="toolbar-item search-nav-item" v-if="search">
            <quick-search></quick-search>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import QuickSearch from '../quick-search'
import { mapGetters } from 'vuex'
export default {
  components: {
    QuickSearch
  },
  props: {
    search: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters({
      account: 'account'
    })
  },
  data() {
    return {
      shown: false
    }
  },
  mounted() {
    this.shown = false
  }
}
</script>

<style lang="less">
.navbar-toggle {
  display: none;
}

.navbar-profile {
  display: flex;
  li {
    &.toolbar-item {
      a {
        font-size: 13px !important;
      }
      &:hover {
        a {
          background: transparent;
        }
      }
      display: inline-block;
      margin-left: 10px;
    }

    &.search-nav-item {
      width: 240px;
      padding-top: 6px;
      margin-right: 5px;
    }
  }
}

.blue {
  .navbar-toggle {
    right: 15px !important;
    top: 12px !important;
  }
  .navbar-list-wrap {
    background: #39f;
    top: 51px;
    li {
      a {
        color: white !important;
      }
    }
  }
}

@media (min-width: 992px) {
  .navbar-list-wrap {
    display: none;
  }
}
@media (max-width: 991px) {
  .navbar-toggle {
    position: absolute;
    right: 0;
    top: -12px;
    font-size: 18px;
    display: block;
  }
  .navbar-list-wrap {
    position: fixed;
    background: white;
    top: 60px;
    left: 0;
    right: 0;
    outline: 0;
    bottom: 0;
    padding-bottom: 15px;
    z-index: 999;
    li {
      float: none !important;
      margin: 0 !important;
      list-style: none;
      line-height: 40px;
      border-top: 1px solid #eee;
      display: block;
      &.search-nav-item {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: none;
      }

      a {
        color: #39f !important;
        padding: 0 !important;
        display: block;
        font-size: 13px !important;
      }
    }
  }
}
</style>
